<!--设计器主控件-->

<template>
  <div class="designer-main">
    <Layout>
      <!--顶部栏，固定布局-->
      <DesignerHeader></DesignerHeader>

      <Layout :style="{paddingTop: '48px'}">

        <!--左结构树侧边栏-->
        <Sider ref="structureTreeSidebar"
               :width="220"
               hide-trigger
               collapsible
               collapsed-width="0"
               :style="{
                 borderRight: '1px solid #424242',
                 position: 'fixed',
                 height: 'calc(100% - 48px)',
                 left: structureTreeSidebarLeft,
                 overflowY: 'auto',
                 overflowX: 'hidden',
                 zIndex: 3
               }" @click.stop.native="leftSidebarClickHandle">

          <FormDesignerStructureTree v-if="pageMetadata.develop_canvas == 'FormLayoutCanvas'"></FormDesignerStructureTree>
          <StructureTreeTable v-else></StructureTreeTable>

        </Sider>

        <!-- 左组件库侧边栏 -->
        <Sider ref="componentLibrarySidebar"
               :width="230"
               hide-trigger
               collapsible
               collapsed-width="0"
               :style="{
                 borderRight: '1px solid #424242',
                 position: 'fixed',
                 height: 'calc(100% - 48px)',
                 left: componentLibrarySidebarLeft,
                 overflowY: 'auto',
                 overflowX: 'hidden',
                 zIndex: 2
               }" @click.stop.native="leftSidebarClickHandle">
          <FormWidgetLibrary v-if="pageMetadata.develop_canvas == 'FormLayoutCanvas'"></FormWidgetLibrary>
          <ComponentLibrary v-if="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas' || pageMetadata.develop_canvas == 'ReactiveLayoutCanvas'"></ComponentLibrary>
        </Sider>

        <!--中间内容区-->
        <Content
            id="mainContainer"
            :style="{
              marginRight: contentMarginRight,
              marginLeft: contentMarginLeft,
              height: 'calc(100% - 48px)',
              padding: '0px',
              backgroundColor: '#B0B0B0',
              transition: 'all 0.2s ease-in-out 0s'
            }">
          <div :style="{
                width: '100%',
                height: '100%',
                overflow: 'hidden',
                backgroundColor: 'rgba(33,33,33,.7)',
                position: 'relative',
                zIndex: 4
               }">
            <h1 class="none-message" v-if="!pageMetadata.develop_canvas" style="text-align: center; opacity: 0.7; margin-top: 100px; color: #fff;">请从左上角工程信息中，选择一个页面进行编辑。</h1>
            <component ref="targetComp" :is="pageMetadata.develop_canvas"></component>
          </div>
        </Content>

        <!--右侧边栏，固定布局-->
        <Sider ref="rightSidebar"
               :width="330"
               hide-trigger
               collapsible
               collapsed-width="1"
               :style="{
                 borderLeft: '1px solid #424242',
                 position: 'fixed',
                 height: 'calc(100% - 48px)',
                 right: rightSidebarRight,
                 overflow: 'auto',
                 zIndex: 4
               }" @click.stop.native="rightSidebarClickHandle">

          <div class="right-sidebar-inner">
            <div class="tabs-wrapper">
              <Row>
                <i-col span="12">
                  <div class="tabs-item"
                       :class="{'active': rightTabActived == 'setting_tab'}"
                       @click="rightTabActived = 'setting_tab'">主要配置</div>
                </i-col>
                <i-col span="12">
                  <div class="tabs-item" :class="{'active': rightTabActived == 'other_setting_tab'}"
                       @click="rightTabActived = 'other_setting_tab'">其他配置</div>
                </i-col>
              </Row>
            </div>
            <div class="body-wrapper">
              <div class="tab-pane" v-show="rightTabActived == 'setting_tab'">
                <template v-if="pageMetadata.develop_canvas == 'FormLayoutCanvas'">
                  <Collapse value="1" :style="{marginTop: currentSelectGroupItemId ? '-10px': '', border: '0px'}">
                    <Panel name="0">
                      [ 表单配置 ]
                      <div slot="content">
                        <component :is="'FormLayoutConfigDataForm'"></component>
                      </div>
                    </Panel>
                    <Panel name="1">
                      [ 部件配置 ]
                      <div slot="content">
                        <component v-if="!purenessLayoutEditModel" :is="rightSidebarFuncCompConfigFormName"></component>
                        <Alert type="info" v-show="purenessLayoutEditModel && rightSidebarFuncCompConfigFormName"
                               style="padding: 8px; text-align: center;">当前为纯布局编辑模式，无法加载组件配置表单</Alert>
                      </div>
                    </Panel>
                  </Collapse>
                </template>
                <template v-else>
                  <div v-show="currentSelectLayoutItemIds.length > 1" class="config-panel">
                    <div class="header">布局块排列布局</div>
                    <div class="body">
                      <ArrangeTheLayout></ArrangeTheLayout>
                    </div>
                  </div>
                  <div v-show="currentSelectGroupItemId" class="config-panel">
                    <div class="header">组配置</div>
                    <div class="body">
                      <AbsoluteGroupItemForm v-if="currentSelectGroupItemId"></AbsoluteGroupItemForm>
                    </div>
                  </div>
                  <Collapse v-model="rightTabCollapseActived"
                            :style="{marginTop: currentSelectGroupItemId ? '-10px': '', border: '0px'}">
                    <Panel name="layoutItem_config">
                      <span style="font-weight: bold;">[ 布局块配置 ]</span>
                      <div slot="content">
                        <component v-if="currentSelectLayoutItemId"
                                   :is="LayoutItemFormCompName"></component>
                        <p v-else style="text-align: center;">未找到可配置的布局块</p>
                      </div>
                    </Panel>
                    <Panel name="comp_config">
                      <span style="font-weight: bold;">
                        [ {{currentCompAliasName ? currentCompAliasName : '组件配置'}} ]
                        <Tooltip v-if="rightSidebarFuncCompConfigFormName && rightSidebarFuncCompConfigFormName != 'NullForm'"
                                 placement="right" content="组件使用说明">
                          <a style="color: #fafafa;" href="javascript:;" @click.stop="openComponentDocument">
                            <Icon type="ios-paper" size="14"/>
                          </a>
                        </Tooltip>
                        <Tag style="position: absolute; right: 5px; top: 6px;" v-if="currentCompVersion" color="primary">v{{currentCompVersion}}</Tag>
                      </span>
                      <div slot="content">
                        <component v-if="!purenessLayoutEditModel" :is="rightSidebarFuncCompConfigFormName"></component>
                        <Alert type="info" v-show="purenessLayoutEditModel && rightSidebarFuncCompConfigFormName"
                               style="padding: 8px; text-align: center;">当前为纯布局编辑模式，无法加载组件配置表单</Alert>
                        <p v-if="!rightSidebarFuncCompConfigFormName" style="text-align: center;">未找到可配置的组件</p>
                      </div>
                    </Panel>
                  </Collapse>
                </template>

              </div>
              <div class="tab-pane" v-show="rightTabActived == 'other_setting_tab'">
                <Collapse v-model="otherSettingCollapseValue" :style="{border: '0px'}">
                  <Panel>
                    <span style="font-weight: bold;">[ 工程配置 ]</span>
                    <p slot="content">
                      <ProjectFormForDesigner></ProjectFormForDesigner>
                    </p>
                  </Panel>
                  <Panel>
                    <span style="font-weight: bold;">[ 页面配置 ]</span>
                    <p slot="content">
                      <PageFormForDesigner v-show="this.$store.state.designer.rightSidebarPageConfigFormName"></PageFormForDesigner>
                    </p>
                  </Panel>
                  <Panel v-if="pageMetadata.develop_canvas != 'FormLayoutCanvas'">
                    <span style="font-weight: bold;">[ 画布配置 ]</span>
                    <p slot="content">
                      <component :is="canvasConfigCompName" :showCodeEditor="rightTabActived == 'other_setting_tab'"></component>
                    </p>
                  </Panel>
                </Collapse>
              </div>
            </div>
          </div>

        </Sider>

        <!--底部栏-->
        <DesignerFooter ref="designerFooter"></DesignerFooter>
      </Layout>
    </Layout>

    <ComponentDocument ref="componentDocument"
                       :title="currentCompAliasName"
                       :compName="rightSidebarFuncCompConfigFormName.replace('Form', '')"
                       :show="componentDocumentVisible"
                       @cancel="componentDocumentVisible = false"></ComponentDocument>

  </div>
</template>

<script>
  import DesignerHeader from './DesignerHeader'
  import DesignerFooter from './DesignerFooter'
  import ComponentLibrary from './common/ComponentLibrary'
  import StructureTreeTable from './common/StructureTreeTable'
  import FormDesignerStructureTree from './common/FormDesignerStructureTree'
  import AbsoluteLayoutConfigDataForm from './absolute/AbsoluteLayoutConfigDataForm'
  import ReactiveLayoutConfigDataForm from './reactive/ReactiveLayoutConfigDataForm'
  import AbsoluteLayoutCanvas from './absolute/AbsoluteLayoutCanvas'
  import ProjectFormForDesigner from './common/ProjectFormForDesigner'
  import PageFormForDesigner from './common/PageFormForDesigner'
  import AbsoluteLayoutItemForm from "./absolute/AbsoluteLayoutItemForm";
  import ReactiveLayoutItemForm from "./reactive/ReactiveLayoutItemForm";
  import FormLayoutItemForm from "./formLayout/FormLayoutItemForm";
  import AbsoluteGroupItemForm from './absolute/AbsoluteGroupItemForm'
  import ArrangeTheLayout from './common/ArrangeTheLayout'

  import ReactiveLayoutCanvas from "./reactive/ReactiveLayoutCanvas";

  import FormLayoutCanvas from './formLayout/FormLayoutCanvas'
  import FormWidgetLibrary from './common/FormWidgetLibrary'
  import FormLayoutConfigDataForm from './formLayout/FormLayoutConfigDataForm'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'DesignerMain',
    components: {
      DesignerHeader,
      DesignerFooter,
      ComponentLibrary,
      StructureTreeTable,
      FormDesignerStructureTree,
      AbsoluteLayoutConfigDataForm,
      ReactiveLayoutConfigDataForm,
      AbsoluteLayoutCanvas,
      ProjectFormForDesigner,
      AbsoluteLayoutItemForm,
      ReactiveLayoutItemForm,
      FormLayoutItemForm,
      AbsoluteGroupItemForm,
      ArrangeTheLayout,
      PageFormForDesigner,

      ReactiveLayoutCanvas,
      FormLayoutCanvas,
      FormWidgetLibrary,
      FormLayoutConfigDataForm
    },
    data() {
      return {
        structureTreeSidebarLeft: '0px',
        componentLibrarySidebarLeft: '220px',
        contentMarginLeft: '450px',
        contentMarginRight: '330px',
        rightSidebarRight: '0px',

        rightTabActived: 'setting_tab',
        rightTabCollapseActived: ['layoutItem_config', 'comp_config'],

        otherSettingCollapseValue: ['2'],

        currentCompVersion: '',      // 当前配置组件的版本号
        currentCompAliasName: '',    // 当前配置组件的组件别名

        componentDocumentVisible: false,

        objResizeObserver: null
      }
    },
    mounted() {
      localStorage.setItem('tmpLocalProp', this.tmpLocalProp);
      this.mainContainerResizeListener();

      this.$EventBus.$on('pn_update_comps_success', () => {
        if (this.rightSidebarFuncCompConfigFormName && this.rightSidebarFuncCompConfigFormName != 'NullForm') {
          let compName = this.rightSidebarFuncCompConfigFormName.replace(/(.*)Form/, '$1');
          this.updateCurrentCompVersion(compName, true)
        }
      })
    },
    methods: {

      mainContainerResizeListener () {
        if (this.adaptionDesignerCanvasZoom) {
          this.objResizeObserver = new ResizeObserver(() => {
            if (this.pageMetadata.layout.layoutConfigData) {
              setTimeout(()=>{
                this.$DesignerCommonUtil.initDesignerZoomValue(this.pageMetadata.layout.layoutConfigData.width)
              }, 300)
            }
          });
          this.objResizeObserver.observe(document.getElementById('mainContainer'))
        }
      },

      leftSidebarClickHandle () {
        this.$EventBus.$emit('pn_leftSidebarClick')
      },

      rightSidebarClickHandle () {
        this.$EventBus.$emit('pn_rightSidebarClick')
      },

      openComponentDocument () {
        this.componentDocumentVisible = !this.componentDocumentVisible;
      },

      updateCurrentCompVersion (compName, isReset) {
        if (compName) {
          let baseAttr = this.$PnUtil.getCompBaseAttr(compName);
          if (isReset) {
            this.currentCompVersion = baseAttr.version
          }else {
            let currentSelectCompVersion = localStorage.getItem('currentSelectCompVersion');
            if (currentSelectCompVersion) {
              if (currentSelectCompVersion != baseAttr.version) {
                this.currentCompVersion = currentSelectCompVersion + ' - 可升级至' + baseAttr.version
              }else {
                this.currentCompVersion = currentSelectCompVersion
              }
            }else {
              this.currentCompVersion = '无版本号'
            }
          }
        }else {
          this.currentCompVersion = ''
        }
      }

    },
    computed: {
      ...mapFields({
        tmpLocalProp: 'tmpLocalProp',
        projectInfo: 'projectInfo',
        pageMetadata: 'pageMetadata',
        rightSidebarFuncCompConfigFormName: 'rightSidebarFuncCompConfigFormName',

        structureTreeSidebarCollapsed: 'structureTreeSidebarCollapsed',
        componentLibrarySidebarCollapsed: 'componentLibrarySidebarCollapsed',
        rightSidebarCollapsed: 'rightSidebarCollapsed',

        currentSelectGroupItemId: 'currentSelectGroupItemId',
        currentSelectGroupItemIds: 'currentSelectGroupItemIds',
        currentSelectLayoutItemId: 'currentSelectLayoutItemId',
        currentSelectLayoutItemIds: 'currentSelectLayoutItemIds',

        zoomValue: 'zoomValue',

        purenessLayoutEditModel: 'purenessLayoutEditModel',

        adaptionDesignerCanvasZoom: 'adaptionDesignerCanvasZoom'
      }),
      // 根据develop_canvas返回不同的画布配置表单
      canvasConfigCompName () {
        if(this.$store.state.designer.pageMetadata.develop_canvas === 'AbsoluteLayoutCanvas') {
          return 'AbsoluteLayoutConfigDataForm'
        }else if (this.$store.state.designer.pageMetadata.develop_canvas === 'ReactiveLayoutCanvas') {
          return 'ReactiveLayoutConfigDataForm'
        }
        return ''
      },
      LayoutItemFormCompName () {
        if(this.$store.state.designer.pageMetadata.develop_canvas === 'AbsoluteLayoutCanvas') {
          return 'AbsoluteLayoutItemForm'
        }else if (this.$store.state.designer.pageMetadata.develop_canvas === 'ReactiveLayoutCanvas') {
          return 'ReactiveLayoutItemForm'
        }else if (this.$store.state.designer.pageMetadata.develop_canvas === 'FormLayoutCanvas') {
          return 'FormLayoutItemForm'
        }
        return ''
      }
    },
    watch: {
      'pageMetadata.id': {
        handler: function (val, old) {
          if (val != old) {
            if (this.pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas') {
              this.$DesignerCommonUtil.initDesignerZoomValue(this.pageMetadata.layout.layoutConfigData.width)
            }
          }
        }
      },
      'rightSidebarFuncCompConfigFormName': {
        handler: function (val) {
          if (val && val != 'NullForm') {
            if (this.pageMetadata.develop_canvas != 'FormLayoutCanvas') {
              val = val.replace(/(.*)Form/, '$1');
              setTimeout(() => {
                this.updateCurrentCompVersion(val)
              }, 50)
              if (localStorage.getItem('allCompinfoObj')) {
                this.currentCompAliasName = JSON.parse(localStorage.getItem('allCompinfoObj'))[val].alias_name
              }
            }
          }else {
            this.updateCurrentCompVersion(null)
            this.currentCompAliasName = '';
          }
        }
      },
      'structureTreeSidebarCollapsed': {
        handler: function (val) {
          if (val) {
            this.structureTreeSidebarLeft = '-220px';
            if (this.componentLibrarySidebarCollapsed) {
              this.componentLibrarySidebarLeft = '-230px';
              this.contentMarginLeft = '0px';
            }else {
              this.componentLibrarySidebarLeft = '0px';
              this.contentMarginLeft = '230px';
            }
          }else {
            this.structureTreeSidebarLeft = '0px';
            if (this.componentLibrarySidebarCollapsed) {
              this.contentMarginLeft = '220px';
            }else {
              this.componentLibrarySidebarLeft = '220px';
              this.contentMarginLeft = '450px';
            }
          }
        },
        immediate: true
      },
      'componentLibrarySidebarCollapsed': {
        handler: function (val) {
          if (val) {
            if (this.structureTreeSidebarCollapsed) {
              this.contentMarginLeft = '0px';
              this.componentLibrarySidebarLeft = '-230px';
            }else {
              this.contentMarginLeft = '220px';
              this.componentLibrarySidebarLeft = '-10px';
            }
          }else {
            if (this.structureTreeSidebarCollapsed) {
              this.contentMarginLeft = '230px';
              this.componentLibrarySidebarLeft = '0px';
            }else {
              this.contentMarginLeft = '450px';
              this.componentLibrarySidebarLeft = '220px';
            }
          }
        },
        immediate: true
      },
      'rightSidebarCollapsed': {
        handler: function (val) {
          if (val) {
            this.contentMarginRight = '0px';
            this.rightSidebarRight = '-330px'
          }else {
            this.contentMarginRight = '330px';
            this.rightSidebarRight = '0px'
          }
        },
        immediate: true
      },
      'adaptionDesignerCanvasZoom': {
        handler: function (val) {
          if (val) {
            this.mainContainerResizeListener()
          }else {
            this.objResizeObserver.disconnect()
          }
        }
      }
    }
  }
</script>

<style scoped>
  >>> .ivu-tabs-bar {
    margin-bottom: 0px;
  }
</style>

<style lang="less" scoped>

  .ivu-divider-horizontal {
    margin: 10px 0px;
  }

  .designer-main {
    height: 100%;
  }

  .designer-main .ivu-layout {
    height: 100%;
  }

  .right-sidebar-inner {
    //width: 100%;
    //height: 100%;
    //position: relative;
    .tabs-wrapper {
      width: 100%;
      height: 33px;
      border-bottom: 1px solid #424242;
      background-color: #616161;
      position: sticky;
      top: 0px;
      z-index: 9999;
      .tabs-item {
        width: 100%;
        height: 100%;
        text-align: center;
        color: #fff;
        line-height: 32px;
        cursor: pointer;
        &:hover {
          background-color: #757575;
        }
        &.active {
          background-color: #2196f3;
        }
      }
    }
    .body-wrapper {

    }
  }

  .config-panel {
    width: 100%;
    height: auto;
    .header {
      width: 100%;
      height: 35px;
      background-color: #616161;
      border-bottom: 1px solid #424242;
      color: #fff;
      line-height: 35px;
      padding-left: 15px;
    }
    .body {
      padding: 5px 10px 10px 10px;
      background-color: #424242;
    }
  }

  .none-message {
    font-size: 2em;
    font-weight: bold;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity:0.5;
  }

</style>
